import React, { useContext } from 'react';

import { WidthProvider, Responsive } from 'react-grid-layout';

import ScrollBarLayout from '@/components/ScrollBarLayout';

import '../../../../node_modules/react-grid-layout/css/styles.css';
import '../../../../node_modules/react-resizable/css/styles.css';

import { WelcomeContext } from '@/pages/HomePage/hooks';

import { IWelcomeGrid } from '@/pages/HomePage/type';

const ResponsiveReactGridLayout: any = WidthProvider(Responsive);

export const WelcomeGrid: React.FC<IWelcomeGrid> = ({ children }) => {
  const {
    prefixCls,
    isDraggable,
    layoutInfo,
    isResizable,
    commonDispatch,
    welcomeLayout,
    homeDispatch,
  } = useContext(WelcomeContext);
  const onUpdateLayoutInfo = (layout: any[], layouts: any) => {
    // commonDispatch({
    //   type: 'update-layoutInfo',
    //   payload: layouts,
    // });
    homeDispatch({
      type: 'baseLogin/saveWelcomeLayout',
      payload: {
        welcomeLayout: layouts,
      },
    });
  };

  return (
    <div className={prefixCls + 'body-grid'}>
      <ScrollBarLayout>
        <ResponsiveReactGridLayout
          isDraggable={isDraggable} //是否可以拖拽
          isResizable={isResizable} //是否可重置大小
          margin={[6, 6]}
          containerPadding={[0, 0]}
          rowHeight={30}
          layouts={welcomeLayout}
          cols={{ lg: 12 }}
          breakpoints={{ lg: 1200 }}
          onLayoutChange={onUpdateLayoutInfo}
          isBounded={true}
        >
          {children}
        </ResponsiveReactGridLayout>
      </ScrollBarLayout>
    </div>
  );
};
